import "./App.css";

import { routers } from "./router/routers";
import BeforeEnter from './router/beforeEnter'

import React, { useState } from 'react';
import {
	DesktopOutlined,
	FileOutlined,
	PieChartOutlined,
	TeamOutlined,
	UserOutlined,
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { useNavigate } from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
	return {
		key,
		icon,
		children,
		label,
	};
}
const items = [
	getItem('首页', 'home', <PieChartOutlined />),
	getItem('影院管理', '影院管理', <UserOutlined />, [
		getItem('影院列表', 'cinema'),
		getItem('影院添加', 'addCinema'),
	]),
	getItem('用户管理', '用户管理', <UserOutlined />, [
		getItem('用户列表', 'users'),
	]),
	getItem('预告管理', '预告管理', <UserOutlined />, [
		getItem('预告列表', 'advance'),
		getItem('预告添加', 'addAdvance'),
	]),
	getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
	getItem('演出', 'perform', <FileOutlined />),
	// 热映 待上映 推荐 发现 评论 热播榜
];

function App() {
	const [collapsed, setCollapsed] = useState(false);
	const [crumbs, setceumbs] = useState(['首页'])
	const { token: { colorBgContainer } } = theme.useToken();
	let navigate = useNavigate()
	const getmunu = (e) => {
		console.log(e);
		setceumbs([...e.keyPath])
		navigate('/' + e.key)
	}
	console.log(routers);
	return (

		<Layout
			style={{
				minHeight: '100vh',
			}}
		>
			<Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
				<div className="demo-logo-vertical" />
				<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onClick={(e) => getmunu(e)} />
			</Sider>
			<Layout>
				<Content
					style={{
						margin: '0 16px',
					}}
				>
					<Breadcrumb
						style={{
							margin: '16px 0',
						}}
					>
						{
							(crumbs[1]) ? <Breadcrumb.Item>{crumbs[1]}</Breadcrumb.Item> : <></>
						}
						<Breadcrumb.Item>{crumbs[0]}</Breadcrumb.Item>

					</Breadcrumb>
					<div
						style={{
							padding: 24,
							minHeight: 360,
							background: colorBgContainer,
						}}
					>
						<BeforeEnter routers={routers} />

					</div>
				</Content>
				<Footer
					style={{
						textAlign: 'center',
					}}
				>
					Ant Design ©2023 Created by Ant UED
				</Footer>
			</Layout>
		</Layout>
	)
}
export default App;
